<template>
	<div>
		<div>
			剩余时间:
			<progress :value="remainTime" :max="duration"></progress>
			{{remainTime}}s
			<br>
			<input type="range" :min="0.0" :max="30.0" v-model="duration" @change="handleChange">
			{{duration}}
			<br>
			<button type="button" @click="handleReset">reset</button>
		</div>
	</div>
</template>

<script setup>
	import {ref, computed, onMounted} from 'vue'
	let initVal1 = 0.0
	let initVal2 = 5.0
	const remainTime = ref(initVal1)
	const duration = ref(initVal2)
	
	const handleReset = () => {
		remainTime.value = initVal1
		handleInterval()
	}
	
	let timer = null
	const handleInterval = () => {
		if(timer){
			clearInterval(timer)
			timer = null
		}
		timer = setInterval(() => {
			remainTime.value = (parseFloat(remainTime.value) + 0.1).toFixed(1)
			if(remainTime.value >= duration.value) {
				remainTime.value = duration.value
				clearInterval(timer)
				timer = null
			}
		}, 100)
	}
	const handleChange = (e) => {
		if(remainTime.value >= duration.value) {
			remainTime.value = duration.value
			clearInterval(timer)
			timer = null
		}else{
			handleInterval()
		}
	}
	onMounted(()=>{
		handleInterval()
	})
</script>

<style>
</style>